<template>
  <div id="box">
    <div id="centerContent">
      <!-- 文本 -->
      <span id="Ttext">支付方式</span>
      <span class="down-icon" @click="backTeamScore"
        ><img src="@/assets/images/down.png" style="width: 55px; height: 55px"
      /></span>
      <!-- 线 -->
      <div id="line">
        <hr class="langHr" />
        <hr class="shortHr" />
      </div>
      <!-- 单选框 -->
      <el-radio-group v-model="radio" class="radio">
        <el-radio :label="3" size="larger"><h2> 微信支付</h2></el-radio>
        <el-radio :label="6" size="large"><h2>支付宝</h2> </el-radio>
        <el-radio :label="9" size="large"><h2>银行卡</h2> </el-radio>
      </el-radio-group>
      <!-- 保存按钮 -->
      <el-button type="primary" size="large" @click="$router.push('/order')">确定</el-button>
       <el-button type="primary" size="large" @click="backTeamScore">取消</el-button>
    </div>
  </div>
</template>

<script>
// import { useRouter } from 'vue-router'
import { ref } from 'vue'
export default {
  name: 'myPay',
  setup (props, context) {
    const radio = ref(3)
    // const router = useRouter()
    function backTeamScore () {
      context.emit('closeclick', false)
    }

    return {
      backTeamScore, radio
    }
  }
}
</script>

<style  scoped>
.radio{
  position: absolute;
  margin-top: 220px;
  margin-left: 300px;
}
#centerContent {
  width: 900px;
  height: 500px;
  background-color: #e0eef2;
}
#Ttext {
  position: absolute;
  margin-left: 80px;
  top: 39px;
  font-size: 40px;
  color: #b0b436;
  font-weight: 540;
}
.down-icon {
  position: absolute;
  top: 45px;
  right: 100px;
  cursor: pointer;
}
#line {
  margin-top: -70px;
  margin-bottom: 70px;
}
.langHr {
  width: 700px;
  border: 1px solid #c2dae2;
  margin-top: 112px;
  background-color: #c2dae2;
  position: absolute;
  margin-left: 140px;
}
.shortHr {
  margin-left: 40px;
  width: 200px;
  border: 4px solid #b0b436;
  margin-top: 80px;
  margin-bottom: 40px;
  border-radius: 20px;
  position: absolute;
  top: 30px;
  background-color: #b0b436;
}
.el-button {
  margin-left: 260px;
  background-color: #b0b436;
  position: relative;
  top: 400px;
}
</style>
